<div class="dashboard">
  <div nz-row>
    <div nz-col [nzSpan]="12">
      <div>
        <canvas baseChart
                [datasets]="barChartData"
                [labels]="barChartLabels"
                [options]="barChartOptions"
                [legend]="barChartLegend"
                [chartType]="barChartType"
                (chartHover)="chartHovered($event)"
                (chartClick)="chartClicked($event)"></canvas>
      </div>
      <button nz-button [nzType]="'primary'" (click)="randomize()">
        <span>Update</span>
      </button>
    </div>
    <div nz-col [nzSpan]="12">
      <div style="display: block">
        <canvas baseChart
                [data]="polarAreaChartData"
                [labels]="polarAreaChartLabels"
                [legend]="polarAreaLegend"
                [chartType]="polarAreaChartType"
                (chartHover)="chartHovered($event)"
                (chartClick)="chartClicked($event)"></canvas>
      </div>
    </div>
  </div>
  <br/><br/><br/>
  <div nz-row>
    <div nz-col [nzSpan]="12">
      <canvas baseChart
              [data]="pieChartData"
              [labels]="pieChartLabels"
              [chartType]="pieChartType"
              (chartHover)="chartHovered($event)"
              (chartClick)="chartClicked($event)"></canvas>
    </div>
    <div nz-col [nzSpan]="12">
      <canvas baseChart
              [data]="lineChartData"
              [labels]="lineChartLabels"
              [options]="lineChartOptions"
              [chartType]="lineChartType"
              (chartHover)="chartHovered($event)"
              (chartClick)="chartClicked($event)"></canvas>
    </div>
  </div>
  <div class="col-md-12 text-center" style="margin-top: 10px;height: 50%">
    <button nz-button [nzType]="'primary'" (click)="randomizeType()">
      <span>Toggle</span>
    </button>
  </div>
</div>
